import React, { Component } from 'react';
import { SearchOutline } from 'antd-mobile-icons'
import '../../styles/BookCity.scss'
import { Swiper } from 'antd-mobile'
import * as service from '../../api/index'
class BookCity extends Component {
    constructor() {
        super()
        this.state = {
            bannerlist: [],
            editlist: [],
            tuijianlist: [],
            fenleilist: []
        }
    }
    handclick(){
        this.props.history.push('/serach');
    }
    detail(){
        this.props.history.push('/detail');
        // console.log(111);
    }
    much(){
        this.props.history.push('/much');
    }
    new(){
        this.props.history.push('/new');
    }
    async componentDidMount(){
        var res= await service.swiper_list()
        // console.log(res.data);
        this.setState({bannerlist:res.data })
        // 编辑
        var res = await service.edit_list()
        // console.log(res.data);
        this.setState({editlist:res.data})
        // 推荐
        var res = await service.tuijian_list()
        // console.log(res.data);
        this.setState({tuijianlist:res.data})
        // 分类
        var res = await service.fenlei_list()
        // console.log(res.data);
        this.setState({fenleilist:res.data})
    }
    render() {
        return (
            <div className='bookcity'>
                <div className="header">
                    <span><SearchOutline /></span>
                    <input onClick={()=>{this.handclick()}} type="text" placeholder='输入书名或作者名字搜索' />
                </div>
                <div className="swiper">
                    <Swiper autoplay loop autoplayInterval={2000}>
                        {
                            this.state.bannerlist.map((item, index) => {
                                return (
                                    <Swiper.Item key={index}>
                                        <img src={item.pic} alt="" />
                                    </Swiper.Item>
                                )
                            })
                        }
                    </Swiper>
                </div>
                <div className="main">
                    <div className="edit">
                        <div className="top">
                            <h3>编辑推荐</h3>
                            <span onClick={()=>{this.much()}}>查看更多</span>
                        </div>
                        <div className="bottom">
                            {
                                this.state.editlist.map((item, index) => {
                                    return (
                                        <div className='item' key={index}>
                                            <img onClick={()=>{this.detail()}} src={item.pic} alt="" />
                                            <div className='name'>{item.name}</div>
                                        </div>
                                    )
                                })
                            }
                        </div>
                    </div>
                    <div className="new">
                        <div className="top">
                            <h3>最新上架</h3>
                            <span onClick={()=>{this.new()}}>查看更多</span>
                        </div>
                        <div className="bottom">
                            {
                                this.state.editlist.map((item, index) => {
                                    return (
                                        <div className='item' key={index}>
                                            <img src={item.pic} alt="" />
                                            <div className='name'>{item.name}</div>
                                        </div>
                                    )
                                })
                            }
                        </div>
                    </div>
                    <div className="tuijian">
                        <div className="top">
                            <h3>推荐书单</h3>
                            <span>查看更多</span>
                        </div>
                        <div className="bottom">
                            {
                                this.state.tuijianlist.map((item, index) => {
                                    return (
                                        <div className="one" key={index}>
                                            <img src={item.pic}
                                                alt="" />
                                            <div>
                                                <div className="name">{item.name}</div>
                                                <div className="desc">
                                                    {item.desc}
                                                </div>
                                            </div>
                                        </div>
                                    )
                                })
                            }
                        </div>
                    </div>
                    <div className="fenlei">
                        <div className="top">
                            <h3>分类</h3>
                            <span>查看全部</span>
                        </div>
                        <div className="bottom">
                            {
                                this.state.fenleilist.map((item, index) => {
                                    return (
                                        <div className="one" key={index}>
                                            <img src={item.pic} alt="" />
                                            <div>
                                                <div className="name">{item.name}</div>
                                                <div className="num">{item.num}</div>
                                            </div>
                                        </div>
                                    )
                                })
                            }
                        </div>
                    </div>
                    <div className="like">
                        <div className="top">
                            <h3>猜你喜欢</h3>
                            <span>换一换</span>
                        </div>
                        <div className="bottom">
                            {
                                this.state.editlist.map((item, index) => {
                                    return (
                                        <div className='item' key={index}>
                                            <img src={item.pic} alt="" />
                                            <div className='name'>{item.name}</div>
                                        </div>
                                    )
                                })
                            }
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default BookCity;